<template>
	<view class="wrapper">
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view  aria-role="menuitem" class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabList" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.tabName}}
				</view>
			</view>
		</scroll-view>
		<view class="register">
			<view class="pannel" v-for="(item,index) in serviceList" :key="index">
				<view aria-role="tab" class="toppannel">
					<view class="font-t">{{item.ticketName}}</view>
					<view class="font-w cu-tag bg-red">剩余{{item.diffs}}天</view>
					<text class="uIcon iconfont icon-jinqian1 font-x text-red"></text>
					<text class="font-s">{{item.ticketAmt}}</text>
					<text class="font-l cu-tag line-red">{{item.ticketAmtSur}}</text>
					<view class="border"></view>
				</view>
				<view :class="isFload? 'bottompannel':'height-q'">
					<text aria-role="tab" class="font-a text-grey">使用规则</text>
					<text aria-role="button" v-if="isFload" class="cuIcon-unfold font-c" @click="flod"></text>
					<text aria-role="button" v-if="!isFload" class="cuIcon-fold font-c" @click="flod"></text>
					<view  aria-role="tab" v-if="!isFload">
						<text class="margin-a text-grey">{{item.ticketRule}}</text>
						<text class="margin-b text-grey">限 {{item.ticketBtime.substr(0,10)}} 至 {{item.ticketEtime.substr(0,10)}} 使用</text>
					</view>
				</view>
			</view>
			<view aria-role="tab" v-if="serviceList.length == 0">
				<no-data :src="img_src + 'zwxfz.png'">
					<view bindtap='a' class="text-gray">暂无消费劵信息</view>
				</no-data>
			</view>
		</view>
	</view>
</template>

<script>
	import noData from '@/components/nodata/no-data.vue'
	export default {
		data() {
			return {
				TabCur: 0,
				isFload: true,
				tabList: [{ id: 1,tabName: '全部'},{id: 2,tabName: '未到期'},{id: 3,tabName: '历史卡劵'}],
				serviceList: [],
				img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
				params: {
					pageno: 1
				}
			}
		},
		components:{
			"no-data":noData
		},
		onLoad() {
			this.coupData();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.coupData(e.currentTarget.dataset.id);
				
			},
			flod() {
				this.isFload = !this.isFload;
			},
			coupData(state) {
				let that = this;
				uni.showLoading({title:"加载中"});
				this.params.state = state;
				that.$request.getForm('/view/uacid/coup-list',this.params).then(res => {
					uni.hideLoading();
					let list = res.data;
					for(let i = 0;i<list.length;i++) {
						list[i].diffs = that.$utils.dateDiff(list[i].ticketEtime);
						that.serviceList.push(list[i]);
					}
				})
			}
		}
	}
</script >
<style lang='scss'>
	page {
		 background-color: #fff;
	}
	.text-wight {
		font-size: 15px;
		font-weight: 600;
	}
	.register {
		margin-top: 30rpx;
	}
	.register .pannel {
		width: 700rpx;
		border-radius: 16rpx;
		margin: 0 auto;
	}
	.register .pannel .toppannel {
	  background-color: #e0e096;
	  border-radius: 16rpx 16rpx -16rpx -16rpx;
	  height: 168rpx;
	  width: 100%;
	  border-top-left-radius: 10rpx;
	  border-top-right-radius: 10rpx;
	  background-image: radial-gradient(circle at left bottom, #fff, #fff 10px, transparent 10px),radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 10px);
	  position: relative;
	}
	.border{
	  height: 2rpx;
	  width: 86%;
	  border-bottom: 0.1px dashed #ccc;
	  position: absolute;
	  bottom: 0;
	  left: 7%;
	}
	.register .pannel .bottompannel {
		height: 92rpx;
		width: 100%;
		background-color: #e0e096;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-image: radial-gradient(circle at left top, #fff, #fff 10px, transparent 10px),radial-gradient(circle at right top, #fff, #fff 10px, transparent 10px);
	}
	
	.image-w {
		width:120rpx;
		height:120rpx;
		margin-top:20rpx;
		margin-left:20rpx;
	}
	.font-t {
		position: absolute;
		top: 38rpx;
		left: 47rpx;
		font-weight: 700;
		font-size: 31rpx;
	}
	.font-w {
		position: absolute;
		top: 100rpx;
		left: 48rpx;
		border-radius: 30rpx;
	}
	.font-a {
		position: absolute;
		margin: 28rpx;
		left: 38rpx;
	}  
	.font-c {
		position: absolute;
		margin: 30rpx;
		right: 40rpx;
	}
	.register .pannel .height-q {
		height:187rpx;
		width: 100%;
		background-color: #e0e096;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-image: radial-gradient(circle at left top, #fff, #fff 10px, transparent 10px),radial-gradient(circle at right top, #fff, #fff 10px, transparent 10px);
	}
	.margin-a {
		position: absolute;
		margin: 40rpx;
		margin-top: 80rpx;
	}	
		
	.margin-b {
		position: absolute;
		margin: 40rpx;
		margin-top: 138rpx;
	}		
	.font-x {
		position: absolute;
		float: right;
		right: 72px;
		font-size: 50px;

	}
	.font-s {
		position: absolute;
		margin: 20px;
		right: 0px;
		font-size: x-large;
		color: red;
	}
	
	.font-l {
		position: absolute;
		right: 30px;
		top: 54px;
	}
</style>
